<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>第四天 数据驱动视图</title>
</head>
<body>
	<div id="app">
	</div>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
	<script type="text/javascript">

		Vue.component('Test',{
			template:`<div></div>`
		})

		let App={
			template:`<div class='app'>
				<button ref='btn'>我是按钮1</button>
				<Test ref='test'/>
			</div>`,
			created(){
				console.log(this.$refs.btn);
			},
			beforeMount(){
				console.log(this.$refs.btn);
			},
			mounted(){
				//如果给标签绑定ref='xxx'属性 使用this.$refs.xxx获得原生DOM对象
				//ref属性值不能重名  重名会覆盖
				console.log(this.$refs.btn);
				//如果给组件绑定ref='xxx'属性 使用this.$refs.xxx获得当前组件对象
				console.log(this.$refs.test);
			}
		}

		new Vue({
			el:'#app',
			data(){
				return{

				}
			},
			template:`<App/>`,
			components:{
				App
			}
		})
	</script>
</body>
</html>
